<template>
     <div>
        <h2 class="title" v-if="isShowTitle">选择介绍主视频</h2>
        <div class="table" v-if="isGetList">
            <div class="table-name">选择视频</div>
            <SearchFrom :fromList="searchData" :btnList="btnData" @onClick="searchClick"></SearchFrom>
            <div class="list"> 
                <TableItem key="tableitem" v-for="item in videoList" :id="item.id" :name="item.title" :time="`时长${item.length}秒`" :type="item.type" @iconClick="iconClick($event, item)"></TableItem>
            </div>
            <Pagination :isShowTotal="true" :is-lable="false" :currentPage="currentPage" :page-size="pageSize" :total="totalCount || 0" @pageClick="pageClick"/> 
        </div>
     </div>
</template>
<script lang="ts" setup>

import { getVideosList } from '@/service/video'
import {ref, reactive, onMounted, watch} from 'vue'
import { FromInfo, BtnInfo } from '@/models/components';
import SearchFrom from '@/components/searchForm/searchForm.vue';
import Pagination from '@/components/pagination/pagination.vue'
import TableItem from '@/components/TableItem/index.vue';
import {SearchData} from '@/models/home/video'
import {ElMessage} from 'element-plus'
import { to } from 'await-to-js';

const props = defineProps<{
    selectList: any[],
    isShowTitle?: boolean,
    isGetList?: boolean
    avatarName?: string
}>()


const emit = defineEmits(['select'])
const videoList = ref<any[]>([])
const searchData = reactive<FromInfo[]>([
    {label: '标题', value: '',type: 'input', key: 'title'},
    {label: '标签', value: '', type: 'input', key: 'tag'},
])
const btnData = reactive<BtnInfo[]>([
        {color: '#542A80', label: '搜索'}
])
const searchInfo = ref<any>({})
const currentPage = ref<string | number>(1)
const totalCount = ref<string | number>('')
const pageSize = ref<string | number>(10)

const getVideoByAvatarName = async (lable: string) => {
    const search = {currentPage: currentPage.value, pageSize: pageSize.value, avatarName: lable}
     getVideoListData(search)
}

defineExpose({
    getVideoByAvatarName
})
onMounted(() =>{ 
    // if(props.isGetList) {
        // const search = {currentPage: currentPage.value, pageSize: pageSize.value}
        // getVideoListData(search)
    // }
})
const searchClick = async ({label, value}: any) => {
    searchInfo.value == value;
    searchData.forEach(val => {
        if (val.key)  {
         val.value = value[val.key]
        }
    })
    if(props.avatarName) {
        value['avatarName'] = props.avatarName
    }
    if(label == '搜索') {
        const search = {currentPage: currentPage.value, pageSize: pageSize.value}
        await getVideoListData({...search, ...value})
    }
}
const pageClick = async (e: string | number) => {
    currentPage.value = e;
    let searchInfo = searchData.reduce((acc, cur) => {
        if (cur.value && cur.key) {
            acc[cur.key] = cur.value;
        }
        return acc;
    }, {} as { [key: string]: any })
    await getVideoListData({currentPage: currentPage.value, pageSize: pageSize.value, ...searchInfo})

}

const getVideoListData = async (parms: SearchData): Promise<void> => {
   const [err, data] = await to(getVideosList({...parms, scene: 'live'}))
   if(err || !data.success) {
      ElMessage.error(`请求错误，${data.message}`)
      return;
   }
   totalCount.value = data.totalCount;
   if(!data.items) {
        videoList.value = [];
        return;
   }
   videoList.value = data.items.map((val: any) => {
    let info = props.selectList.find((res) => res.id == val.id);
    return {
        title: val.title,
        length: val.length,
        id: val.id,
        type: info ? 'success' : 'add',
    }
   });
//    tableInfo.tableData = data.items;
//    totalCount.value = data.totalCount;
}
const iconClick = (type: string, item: any) => {
    emit('select', {type, item})
}

watch(() => props.selectList, (newVal) => {
    let ids = newVal.map(res => res.id);
    videoList.value.forEach((val) => {
        val.type = ids.includes(val.id)? 'success' : 'add';
    })
}, {deep: true})
</script>
<style scoped lang="css">
h2 {
    font-size: 16px;
    font-weight: 600;
    height: 20px;
}
.table{
    padding: 10px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.table-name{
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 20px;
   color: #ABA9AD;
   margin-top: -10px;
}

.table .list{
   height: 28vh; 
   width: 80%;
   /* background-color: skyblue; */
   margin-right: 70px;
   padding-right: 20px;
   box-sizing: border-box;
   overflow: auto;
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 4px; /* 设置滚动条的宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    display: none;
  background-color: #f1f1f1; /* 设置滚动条轨道的背景色 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #DDDEE0; /* 设置滚动条滑块的颜色 */
  border-radius: 6px; /* 设置滚动条滑块的圆角 */
}

/* 当鼠标悬停在滚动条上时，滑块的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #B2B2B2; /* 设置鼠标悬停时滚动条滑块的颜色 */
}

</style>